<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2021-12-27 15:59:40
 * @LastEditors: GGB
 * @LastEditTime: 2022-01-04 17:38:08
-->
<template>
  <div class="buyer-item">
    <Popover trigger="hover">
      <template #content> 用户ID:{{ buyer.user_id }} </template>
      <Avatar v-if="buyer.avatar_url" :src="buyer.avatar_url" />
      <Avatar v-else>{{ buyer.nick_name.substring(0, 3) }}</Avatar>
    </Popover>
    <div class="content">
      <span class="buyer-name">{{ buyer.nick_name }}</span>
      <Tag :color="PlatformColorEnum[buyer.platform].value">{{
        platformTypeEnum[buyer.platform].name
      }}</Tag>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Avatar, Tag, Popover } from 'ant-design-vue';
  import { BuyerType } from '/@/views/order/model';
  import { platformTypeEnum, PlatformColorEnum } from '/@/common/enum/platform';

  defineProps<{
    buyer: BuyerType;
  }>();
  // 平台来源
  // const platform={
  //   'MP-TOUTIAO':"抖音"
  // };
</script>

<style lang="less" scoped>
  .buyer-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin: 5px 0;

    .content {
      display: flex;
      flex-direction: column;
      // align-items: center;
      margin-left: 10px;
      align-items: flex-start;

      .buyer-name {
        margin-bottom: 5px;
      }
    }
  }
</style>
